<!--  -->
<template>
    <div class="user">
        <el-button style="margin:10px 20px" type="primary" @click="addClick">新增</el-button>
        <el-input placeholder="请输入业务员信息进行查询"
        @keyup.enter.native="onSearch"
        v-model="searchForm.keyword" clearable style="width: 30%;float:right;">
            <template #append>
                <el-button type="primary" @click="onSearch">查询</el-button>
            </template>
        </el-input>
        <!--内容-->
        <div class="product-content">
            <div class="table-wrap">
                <el-table size="small" v-loading="loading" element-loading-text="加载中" :data="tableData" border
                    style="width: 100%">
                    <el-table-column prop="personId" label="ID" width="80"></el-table-column>
                    <el-table-column prop="personName" label="业务员名称"></el-table-column>
                    <el-table-column label="业务员头像">
                        <template #default="scope">
                           <div v-if="scope.row.personAvatarUrl"> <img :src="scope.row.personAvatarUrl" :width="60" :height="60" /></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="personMobile" label="业务员电话" width="200"></el-table-column>
                    <el-table-column prop="areaIds" label="业务员辖区" width="400">
                        <template #default="scope">
                            <div v-if="scope.row.areaList && scope.row.areaList.length > 0">
                                <div v-for="(p, index) in scope.row.areaList" :key="index">
                                    {{ convertAreas(p) }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isDelete" label="状态" width="80">
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.isDelete == 0">正常</el-tag>
                            <el-tag type="danger" v-else>已删除</el-tag>

                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="190">
                        <template #default="scope">
                            <el-button type="text" size="small" v-if="scope.row.isDelete == 0"
                                @click="handleClick(scope.row, 1)">编辑</el-button>
                            <el-button type="text" size="small" v-if="scope.row.isDelete == 1"
                                @click="handleClick(scope.row, 1)">查看</el-button>
                            <el-button type="text" size="small" @click="handleClick(scope.row, 2)"
                                v-if="scope.row.isDelete == 0">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    :current-page="searchForm.pageIndex" :page-size="searchForm.pageSize"
                    layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
            </div>
        </div>
    </div>

</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import SalesApi from '@/api/sales'
import { useCascaderAreaData } from '../../utils/area';
import { defaultPageSize } from '@/utils/table.js'
export default {
    name: '',
    props: {},
    components: {},
    data() {
        return {
            tableData: [],
            totalDataNumber: 0,
            searchForm: {
                pageIndex: 1,
                pageSize: defaultPageSize,
                keyword: '',
            },
            loading: false,
            defaultData: useCascaderAreaData()
        };
    },
    computed: {},
    watch: {},
    methods: {
        convertAreas(item) {
            const $this = this
            const provice = $this.defaultData.find(f => f.value === item.province)
            const areaValues = []
            if (provice) {
                areaValues.push(provice.label)
                if (provice.children && provice.children.length > 0) {
                    const city = provice.children.find(f => f.value === item.city)
                    if (city) {
                        areaValues.push(city.label)
                        if (city.children && city.children.length > 0) {
                            const dis = city.children.find(f => f.value === item.district)
                            if (dis) {
                                areaValues.push(dis.label)
                            }
                        }
                    }


                }
            }
            return areaValues.join('/')
        },
        loadData() {
            const $this = this
            $this.loading = true
            SalesApi.getPersonData($this.searchForm, true)
                .then(result => {
                    $this.loading = false
                    const { code, data } = result
                    if (code === 1) {
                        $this.tableData = []
                        const records = data.records
                        $this.totalDataNumber = data.total
                        $this.tableData = records
                    }
                }).catch(error => {
                    $this.loading = false
                })
        },
        onSearch() {
            this.searchForm.pageIndex = 1
            this.loadData()
        },
        handleClick(row, type) {
            if (type === 1) {
                //编辑
                this.$router.push({
                    path: '/saleeMan/EditSaleeManDetail',
                    query: {
                        id: row.personId
                    }
                })
            } else {
                //删除
                const $this = this
                ElMessageBox.confirm(
                    '您确定要删除此业务员数据?',
                    '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    SalesApi.deletePerson(row.personId, true)
                        .then(result => {
                            const { code, msg } = result
                            if (code === 1) {
                                ElMessage({
                                    type: 'success',
                                    message: msg
                                })
                                $this.loadData()
                            }
                        })
                })
            }
        },
        addClick() {
            this.$router.push({
                path: '/saleeMan/AddSaleeManDetail'
            })
        },
        handleCurrentChange(current) {

            this.searchForm.pageIndex = current
            this.loadData()
        },
        handleSizeChange(size) {
            this.searchForm.pageSize = size
        }
    },
    created() {
        this.loadData()
    },
    mounted() {

    },
}
</script>
<style scoped></style>